<template>
    <div class="plantBox">
        <div class="tables">
            <div v-for="item in  tableData" :key="item.name" class="table-tr">
                <div v-for="(i, keys) in item" :key="keys" class="table-td" :class="keys == 'name' ? 'header-style' : ''">
                    {{ i }}
                </div>
            </div>
        </div>
        <div ref="devDig" style="width: 95%;height: 300px;"></div>
        <dv-loading v-if="loading" style="color: #fff;position: absolute;">Loading...</dv-loading>
    </div>
</template>
<script>
import * as echarts from "echarts";
export default {
    props:{typeValue:String},
    data() {
        return {
            tableData:[],
            loading:false,
            type:""//参数
        }
    },
    mounted() {
         this.getdevCharts()
    },
    watch:{
        typeValue:function(newValue){
               this.type = newValue;
               this.getdevCharts();
        }
    },
    methods: {
        // 基础建设
        async getdevCharts() {
            this.loading = true
            let { data: res } = await this.$https.get('plant/iot/getDevNum?type=' + this.type)
            //  console.log(res)
            if (res.code != '200') return this.$notify.error({
                title: '错误',
                message: '网络服务器错误'
            });
            this.tableData = []
            let obj = {}
            let sortKeys = Object.keys(res.data[0]).sort();
            for (let key of sortKeys) {
                if (key == 'name') {
                    obj[key] = ' '
                } else {

                    obj[key] = key
                }
            }

            this.tableData.push(obj)
            res.data.forEach(v => {
                let objs = {}
                for (let key of sortKeys) {
                    objs[key] = v[key]
                }
                this.tableData.push(objs)
            })
            let myChart = echarts.getInstanceByDom(this.$refs.devDig);
            if (myChart == undefined) {
                myChart = echarts.init(this.$refs.devDig);
            }
            myChart.clear();
            let tabledatas = JSON.parse(JSON.stringify(this.tableData))
            let serieskeys = (tabledatas.splice(0, 1))[0]
            delete serieskeys.name
            let seriesName = Object.keys(serieskeys).sort();
            let names = tabledatas.map(v => { return v.name })
            let seriesData = []
            let colorList = [
                ['rgba(57, 101, 214, 1)', 'rgba(107, 193, 255, 1)']
                , ["rgba(40, 148, 152, 1)", "rgba(107, 253, 255, 1)"]
                , ["rgba(29, 91, 27, 1)", "rgba(159, 255, 173, 1)"]
                , ["rgba(255, 216, 32, 1)", "rgba(255, 223, 110, 1)"]
                , ["rgba(100, 43, 144, 1)", "rgba(197, 149, 234, 1)"]
            ]
            seriesName.forEach((m, index) => {
                let arrays = []
                tabledatas.forEach(v => {
                    arrays.push(v[m])
                })
                let series = {
                    data: arrays,
                    type: "bar", // 柱图
                    barMaxWidth: "auto",
                    barWidth: 15,
                    name: m,
                    itemStyle: {
                        color: {
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            type: "linear",
                            global: false,
                            colorStops: [{
                                offset: 0,
                                color: colorList[index][0]
                            }, {
                                offset: 1,
                                color: colorList[index][1]
                            }]
                        }
                    }
                }
                seriesData.push(series)
            })
            let option = {
                backgroundColor: '',
                grid: {
                    top: '20%',
                    left: '5%',
                    right: '0%',
                    bottom: '5%',
                    containLabel: true,
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: (params) => {
                        let str = `${params[0].name}<br>`;
                        params.forEach(item => {
                            str += `<div style="display: flex; justify-content: space-between"><div style="margin-right: 10px;">${item.marker} ${item.seriesName}  </div>  ${item.value}</div><br>`
                        })
                        return str;
                    }
                },
                legend: {
                    left: 'right',

                    textStyle: {
                        color: "#fff",
                    }
                },
                xAxis: {
                    type: 'category',
                    data: names,
                    splitLine: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#ffffff",
                        fontSize: 12,
                        interval: 'auto', // x轴间距
                        // rotate:40
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(152, 212, 255, .5)',
                        }
                    },
                },
                yAxis: [{
                    type: 'value',
                    name: "数量",
                    nameGap: '30',
                    min: 0,
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: true,
                        fontSize: 12,
                        color: "#fff",
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(152, 212, 255, .5)',
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(152, 212, 255, .1)',
                        }
                    },
                    nameTextStyle: {
                        color: "#fff    ",
                        fontWeight: 400,
                        fontSize: 12,
                    },
                }],
                series: seriesData
            };
            myChart.setOption(option);
            this.loading = false
        },
    }
}
</script>
<style lang="less" scoped>
.plantBox {
    .tables {
        width: 100%;
        border: 1px solid rgba(116, 199, 179, 0.3);
        color: #C3CAD9;
        font-size: 12px;
        display: flex;
        border-right: none;
        border-bottom: none;
        margin-bottom: 10px;
        .table-tr {
            flex: 1;
            text-align: center;
            border-right: 1px solid rgba(116, 199, 179, 0.3);

            .table-td {
                width: 100%;
                height: 30px;
                line-height: 30px;
                border-bottom: 1px solid rgba(116, 199, 179, 0.3);
            }

            .header-style {
                background-color: rgba(85, 173, 130, .3);
            }
        }
    }
}
</style>